<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>我的收入明细</title>

    <link th:href="@{/static/yonghu/css/personal.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/yonghu/css/colstyle.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" th:href="@{/static/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/lib/laypage/1.2/skin/laypage.css}">
    <link rel="stylesheet" th:href="@{/static/lib/bootstrap/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/styles-2016121272249.css}">
    <script type="text/javascript" th:src="@{/static/lib/jquery/1.9.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/layer/2.4/layer.js}"></script>
    <script type="text/javascript" th:src="@{/static/h-ui/js/H-ui.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/h-ui.admin/js/H-ui.admin.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/laypage/1.2/laypage.js}"></script>
    <script th:src="@{/static/lib/vue.min.js}"></script>
</head>

<body>
<!--头 -->
<header>
    <article>
        <div class="mt-logo">
            <!--顶部导航条 -->

            <!--悬浮搜索框-->

            <div class="clear"></div>
        </div>
        </div>
    </article>
</header>
<div class="nav-table">
    <div class="long-title"><span class="all-goods">我的收入明细</span></div>
</div>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <aside class="menu">
            <ul>
                <li class="person">
                    <a th:href="@{/toKeCheng}">我的课程</a>
                </li>
                <li class="person">
                    <a th:href="@{/toInfo}">个人资料</a>
                </li>
                <li class="person">
                    <a th:href="@{/toShouRu}">我的收益明细</a>
                </li>
                <li class="person">
                    <a  href="javascript:void (0)" id="money">我的钱包</a>
                </li>
            </ul>
        </aside>
        <div class="main-wrap">
            <div class="user-collection">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">我的收入明细</strong> /
                        <small>Course Sal</small>
                    </div>
                </div>
                <hr/>
                <div class="text-c">
                    <!--<button onclick="removeIframe()" class="btn btn-primary radius">关闭选项卡</button>-->
                    请选择一个日期范围：
                    <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })"
                           id="logmin"
                           class="input-text Wdate" style="width:120px;">
                    -
                    <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })"
                           id="logmax"
                           class="input-text Wdate" style="width:120px;">
                    <button id="aa" class="btn btn-success" style="background-color: #d2364c"><i class="Hui-iconfont">&#xe665;</i>
                        搜索
                    </button>
                </div>
                <div class="mt-20" id="list">
                    <table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
                        <thead>
                        <tr class="text-c danger">
                            <th width="80">编号</th>
                            <th width="120">课程名</th>
                            <th width="80">课程价格</th>
                            <th width="120">普通用户购买次数</th>
                            <th width="80">vip购买次数</th>
                            <th width="80">收入</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="text-c" id="eee"></tr>
                        <tr class="text-c" v-for="(item,index) in result" id="exist">
                            <td>{{index+1}}</td>
                            <td>{{item.courseName}}</td>
                            <td>{{item.coursePrice}}</td>
                            <td>{{item.countUser}}</td>
                            <td>{{item.countVip}}</td>
                            <td>{{item.shouRu}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <br/>
                    <div id="pagenav"></div>
                </div>
            </div>
        </div>
        <!--底部-->
    </div>
</div>
</body>
<script th:inline="javascript">
    var app = new Vue({
        el: '#list',
        data: {
            result: []
        }
    });
    var getShouRu = function () {
        $.ajax({
            url: "/getShouRu",
            dataType: "json",
            type: "post",
            data: {
                start: $("#logmin").val(),
                end: $("#logmax").val()
            },
            success: function (data) {
                if (data[0]==0){
                    $("#eee").html("该月未有人购买！")
                }else {
                    $("#eee").remove();
                    app.result = data;
                }
                /*$.each(data, function (index, obj) {
                    if (obj == 0) {
                        $("#eee").html("该月未有人购买！")
                    }
                    $("#exist").html("")
                })*/
            }
        })
    }
    getShouRu()
    $("#aa").click(function () {
        getShouRu();
    })
    $("#money").click(function () {
        layer.open({
            type: 2,
            title: '我的钱包',
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1000px', '600px'],
            content: '/toWallet?id='+[[${session.teacher.teacherId}]]
        });
    })

</script>

</html>